<template>
    <div>

        <!-- 条件查询 -->
        <div>
            <el-row type="flex" class="row-bg">
                <el-col :span="22">
                    <el-form :inline="true" :model="queryData" class="demo-form-inline" size="small">

                        <el-form-item label="用户姓名">
                            <el-input v-model="queryData.userName" placeholder="请输入用户姓名" clearable></el-input>
                        </el-form-item>

                        <el-form-item label="用户账户">
                            <el-input v-model="queryData.userAccount" placeholder="请输入用户账户" clearable></el-input>
                        </el-form-item>

                        <el-form-item label="用户类型">
                            <el-select v-model="queryData.userType" placeholder="请选择" clearable>
                                <el-option label="管理员" value="1">
                                </el-option>
                                <el-option label="用户" value="2">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="用户状态">
                            <el-select v-model="queryData.userState" placeholder="请选择" clearable>
                                <el-option label="启用" value="1">
                                </el-option>
                                <el-option label="禁用" value="2">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="选择日期" clearable>
                            <el-date-picker v-model="queryData.createdTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>

                        <!-- 查询按钮 -->
                        <el-form-item>
                            <el-button type="primary" @click="query">查询</el-button>
                        </el-form-item>

                    </el-form>
                </el-col>

                <!-- 添加按钮 -->
                <el-col :span="2">
                    <el-button type="primary" @click="addUser" size="small">添加</el-button>
                </el-col>
            </el-row>

            <!-- 添加用户弹窗 -->
            <el-dialog title="添加用户" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">

                <el-row type="flex" class="row-bg">
                    <el-col :span="10" :offset="6">
                        <div>
                            <el-form :model="addData" status-icon label-width="100px">

                                <el-form-item label="用户姓名" prop="userName">
                                    <el-input type="text" v-model="addData.userName" auto-complete="off"></el-input>
                                </el-form-item>

                                <el-form-item label="用户账户" prop="userAccount">
                                    <el-input type="text" v-model="addData.userAccount" auto-complete="off"></el-input>
                                </el-form-item>

                                <el-form-item label="用户类型">
                                    <el-select v-model="addData.userType" placeholder="请选择">
                                        <el-option label="管理员" value="1">
                                        </el-option>
                                        <el-option label="用户" value="2">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="用户状态">
                                    <el-select v-model="addData.userState" placeholder="请选择">
                                        <el-option label="启用" value="1">
                                        </el-option>
                                        <el-option label="禁用" value="2">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                            </el-form>
                        </div>

                    </el-col>
                </el-row>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addUserSubmit">提交</el-button>
                </span>
            </el-dialog>

        </div>

        <!-- 数据表格展示 -->
        <div class="tableShow">

            <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" ref="multipleTable">
                <el-table-column type="selection" width="55">
                </el-table-column>

                <el-table-column prop="userName" label="用户姓名">
                </el-table-column>

                <el-table-column prop="userType" label="用户类型">
                    <template slot-scope="scope">
                        {{scope.row.userType==="1"?"管理员":"用户"}}
                    </template>
                </el-table-column>

                <el-table-column prop="userAccount" label="用户账户">
                </el-table-column>

                <el-table-column prop="userState" label="用户状态">

                    <template slot-scope="scope">
                        {{scope.row.userState==="1"?"启用":"禁用"}}
                    </template>
                </el-table-column>

                <el-table-column prop="createdTime" label="添加时间">
                </el-table-column>

                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">

                        <el-button type="primary" size="small">编辑</el-button>
                        <el-button type="primary" size="small">单选</el-button>
                    </template>
                </el-table-column>

            </el-table>

            <!-- 分页 -->
            <el-row type="flex" class="row-bg">
                <el-col :span="6"></el-col>
                <el-col :span="6" :offset="2">
                    <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChange">
                    </el-pagination>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>

        </div>
    </div>
</template>
<script>
import * as API from "../http/api";
export default {
    created() {
        let that = this;
        // that.getData();
    },
    data() {
        return {
            tableData: [
                {
                    userName: `name`,
                    userType: `1`,
                    userAccount: `name`,
                    userState: `1`
                },
                {
                    userName: `name`,
                    userType: `1`,
                    userAccount: `name`,
                    userState: `1`
                },
                {
                    userName: `name`,
                    userType: `1`,
                    userAccount: `name`,
                    userState: `1`
                },
                {
                    userName: `name`,
                    userType: `1`,
                    userAccount: `name`,
                    userState: `1`
                },
                {
                    userName: `name`,
                    userType: `1`,
                    userAccount: `name`,
                    userState: `1`
                },
                {
                    userName: `name`,
                    userType: `1`,
                    userAccount: `name`,
                    userState: `1`
                }
            ], //表格数据
            total: 1000, //页码总数
            pageIndex: 1, //当前页码

            dialogVisible: false, //添加弹框的开关

            // 条件查询
            queryData: {
                userName: null,
                userType: null,
                userAccount: null,
                userState: null,
                createdTime: null
            },

            addData: {
                userName: null,
                userType: "1",
                userAccount: null,
                userState: "1"
            }
        };
    },
    methods: {
        handleSelectionChange(val) {
            let that = this;
            console.log(val);

            val.forEach((item, index) => {
                if (index !== 3) {
                    that.$refs.multipleTable.toggleRowSelection(item);
                } else {
                    this.multipleSelection = val[val.length - 1];
                }
            });
        },
        // 获取表格数据
        getData() {
            let that = this;
            that
                .$axios({
                    method: "get",
                    url: API.queryUser,
                    params: {
                        userName: that.queryData.userName,
                        userType: that.queryData.userType,
                        userAccount: that.queryData.userAccount,
                        userState: that.queryData.userState,
                        createdTime: that.queryData.createdTime,
                        pageIndex: that.pageIndex,
                        pageSize: "20"
                    }
                })
                .then(res => {
                    console.log(res.result);
                    that.tableData = res.result;
                    that.total = res.countPage * 10;
                });
        },
        // 切换页码时改变
        currentChange(value) {
            let that = this;
            that.pageIndex = value + "";
            that.getData();
        },
        // 条件查询
        query() {
            let that = this;
            that.pageIndex = "1";
            that.getData();
        },
        // 点击添加按钮时
        addUser() {
            let that = this;
            that.dialogVisible = true;
        },
        handleClose(done) {
            done();
        },
        // 点击提交添加用户
        addUserSubmit() {
            let that = this;
            that
                .$axios({
                    method: "get",
                    url: API.addUser,
                    params: {
                        userName: that.addData.userName,
                        userType: that.addData.userType,
                        userAccount: that.addData.userAccount,
                        userState: that.addData.userState
                    },
                    customErr: true
                })
                .then(res => {
                    console.log(res);
                    if (res.code === 0) {
                        this.$message({
                            message: "添加成功",
                            type: "success"
                        });
                        that.dialogVisible = false;
                        that.addData.userName = null;
                        that.addData.userType = null;
                        that.getData();
                    } else {
                        this.$message({
                            message: "添加失败",
                            type: "error"
                        });
                    }
                });
        }
    }
};
</script>
<style lang="scss">
</style>
